<template>
	<view class="rank">
		<scroll-view
								 scroll-with-animation="true"
								 show-scrollbar="false"
								 scroll-y="true" 
								 class="scroll-Y" >
		
		<view class="block" v-for="(item, index) in list" :key="item.id">
			<view class="left">
				<p>{{item.name}}</p>
				<image :src="item.coverImgUrl" mode=""></image>
			</view>
			<view class="right">
				{{item.description}}
			</view>
		</view>
		
		</scroll-view>
	</view>
</template>
 
<script>
	import {getRank} from "@/network/axios/topList/getRank"
	
	export default {
		name: '',
		data(){
			return {
				list: []
			}
		},
		methods:{
			
		},
		created() {
			getRank().then(res => {
				this.list = res.data.list
				console.log(this.list)
			})
		}
	}
</script>
 
<style lang="less" scoped>
.scroll-Y {
	padding: 10px;
	height: 480px;
	.block {
		display: flex;
		padding: 10px 0;
		.left {
			width: 200upx;
			text-align: center;
			font-size: 20upx;
			image {
				width: 100%;
				height: 80px;
			}
		}
		.right {
			padding-top: 40px;
			padding-left: 50upx;
			padding-right: 40upx;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 20upx;
			text-indent: 1em;
			color: #353b48;
		}
	}
}
</style>
